<template>
  <div>
    <el-form ref='form' :model='loginForm' status-icon :rules='rules'>
      <el-form-item prop='userName'>
        <el-input v-model='loginForm.userName' placeholder='请输入用户名' prefix-icon='el-icon-user-solid' />
      </el-form-item>
      <el-form-item prop='password'>
        <el-input
          type='password'
          show-password v-model='loginForm.password'
          placeholder='请输入密码'
          prefix-icon='el-icon-lock' />
      </el-form-item>
      <fx-verify-code v-if='false' ref='loginVerify' />

      <reset-password />
      <el-button type='primary' plain style='width: 100%;margin-left: 0;' @click='submit'>立即登录</el-button>
    </el-form>
  </div>
</template>

<script>
import VerifyCode from '@/components/VerifyCode'
import ResetPassword from '@/pages/login/views/ResetPassword'
import LoginService from '@/service/users/LoginService'
import pagesUrl from '@/config/pageUrl'

export default {
  name: 'LoginPage',
  components: {
    'fx-verify-code': VerifyCode,
    'reset-password': ResetPassword
  },
  created() {
    const currentUser = JSON.parse(sessionStorage.getItem('currentUser'))
    if(currentUser) {
      this.loginForm.userName = currentUser.userName
      this.loginForm.password = currentUser.password.slice(0, currentUser.password.length - 1)
    } else {
      this.loginForm.userName = ''
      this.loginForm.password = ''
    }

    document.addEventListener('keydown', e => {
      if (e.key === 'Enter') {
        this.submit()
      }
    })
  },
  data() {
    const validateUserName = (rule, value, cb) => {
      if (!value) {
        return cb(new Error('请输入用户名！'))
      }
      cb()
    }
    const validatePassword = (rule, value, cb) => {
      if (!value) {
        return cb(new Error('请输入密码！'))
      }
      cb()
    }

    return {
      // 登录信息表
      loginForm: {
        userName: '',
        password: ''
      },
      rules: {
        userName: [{ required: true, validator: validateUserName, trigger: 'blur' }],
        password: [{ required: true, validator: validatePassword, trigger: 'blur' }]
      }
    }
  },
  methods: {
    submit() {

      // this.$refs.loginVerify.$refs.form.validate(valid => valid)
      // && this.$refs.registerVerify.isVerified
      this.$refs.form.validate(async valid => {
        if (valid) {
          // 验证成功就发起登录请求
          let res = await LoginService.login(this.loginForm)

          if (res.data.status === 200) {
            this.$message.success(res.data.message)
            // 当前登录用户 和 token存入会话中
            sessionStorage.setItem('authorization', res.headers['authorization'])
            sessionStorage.setItem('currentUser', JSON.stringify({
              userName: this.loginForm.userName,
              password: this.loginForm.password + Math.floor(Math.random()*10)
            }))
            // 登陆成功就跳转到主页
            setTimeout(() => {
              location.replace(pagesUrl.user)
            }, 1000)
          } else {
            this.$message.error(res.data.message)
          }

        } else {
          this.$message.error('请输入正确的格式！')
        }
      })
    }
  }
}
</script>

<style scoped>

.el-button--text:hover {
  color: #409EFF;
  transition: .6s;
}

.verifyCode {
  margin-bottom: 8px;
}

</style>
